import { Button, Form, InputNumber, message } from 'antd';
import { useEffect, useState } from 'react';
import { getFormulaNum, setFormulaNum } from './data';
import OStyle from './index.less';
const FormulaHome: React.FC<any> = () => {
  const [isSet, setIsSet] = useState<boolean>(false);
  const [form] = Form.useForm();
  const [saveLoading, setLoading] = useState<boolean>(false);
  /**
   * 获取
   */
  const init = async () => {
    const { data } = await getFormulaNum();
    if (data) {
      form.setFieldsValue({ ...data });
    }
  };

  useEffect(() => {
    init();
  }, []);
  /**
   * 保存
   */
  const savefun = async () => {
    await form.validateFields();
    const params = form.getFieldsValue();
    const count = Number(params.a1) + Number(params.a2) + Number(params.a3);
    if (count !== 100) {
      message.error('占比系数相加不等于100，请检查！');
      return;
    }
    setLoading(true);
    setFormulaNum({ ...params }).then((res) => {
      setLoading(false);
      if (res && res.code == '200') {
        message.success('保存成功');
        setIsSet(false);
        init();
      }
    });
  };

  return (
    <div className="safe_boss_page_content">
      {!isSet ? (
        <Button
          type="primary"
          onClick={() => {
            setIsSet(true);
          }}
        >
          设置
        </Button>
      ) : (
        <div className="flexr alc">
          <Button
            style={{ marginRight: '10px' }}
            onClick={() => {
              init();
              setIsSet(false);
            }}
          >
            取消
          </Button>

          <Button
            type="primary"
            loading={saveLoading}
            onClick={() => {
              savefun();
            }}
          >
            保存
          </Button>
        </div>
      )}
      <div className="flexr alc juc">
        <Form form={form} className={OStyle.Formula}>
          <div className="flexr alc juc">
            企业安全指数计算公式
            <span className={OStyle.fh}>=</span>
            <div className={OStyle.fs}>
              <div className={OStyle.fz}>单车安全指数之和</div>
              <div className={OStyle.fm}>车辆数量</div>
            </div>
            <span className={OStyle.fh}>*</span>
            <Form.Item name="a1" rules={[{ required: true, message: '请输入占比系数' }]}>
              <InputNumber
                className={OStyle.xsIpnut}
                min={0}
                max={100}
                precision={2}
                placeholder="请输入"
                addonAfter="%"
                disabled={!isSet}
              />
            </Form.Item>
            <span className={OStyle.fh}>+</span>
            <div className={OStyle.fs}>
              <div className={OStyle.fz}>单人安全指数之和</div>
              <div className={OStyle.fm}>司机人数</div>
            </div>
            <span className={OStyle.fh}>*</span>
            <Form.Item name="a2" rules={[{ required: true, message: '请输入占比系数' }]}>
              <InputNumber
                className={OStyle.xsIpnut}
                min={0}
                max={100}
                precision={2}
                placeholder="请输入"
                addonAfter="%"
                disabled={!isSet}
              />
            </Form.Item>
            <span className={OStyle.fh}>+</span>
            <div className={OStyle.fs}>
              <div>企业安全管理指数</div>
            </div>
            <span className={OStyle.fh}>*</span>
            <Form.Item name="a3" rules={[{ required: true, message: '请输入占比系数' }]}>
              <InputNumber
                className={OStyle.xsIpnut}
                min={0}
                max={100}
                precision={2}
                placeholder="请输入"
                addonAfter="%"
                disabled={!isSet}
              />
            </Form.Item>
          </div>
          <div className={OStyle.tips}>注：占比系数相加必须等于100</div>
        </Form>
      </div>
    </div>
  );
};

export default FormulaHome;
